<template>
    <div style="overflow: hidden">
        <el-menu :default-active="this.$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect"
            active-text-color="#000" :router="true" style="">
            <el-menu-item index="/userManage" style="width: 16%; text-align: center; font-size: 16px">用户管理
            </el-menu-item>
            <el-menu-item index="/orderManage" style="width: 16%; text-align: center; font-size: 16px">订单管理</el-menu-item>
            <el-menu-item index="/villageManage" style="width: 16%; text-align: center; font-size: 16px">小区管理
            </el-menu-item>
            <el-menu-item index="/estateManage" style="width: 16%; text-align: center; font-size: 16px">房产管理
            </el-menu-item>
            <el-menu-item index="/parkingManage" style="width: 16%; text-align: center; font-size: 16px">车位管理</el-menu-item>
            <el-menu-item index="/couponManage" style="width: 16%; text-align: center; font-size: 16px">优惠券管理</el-menu-item>
            <el-dropdown class="avatar-container" trigger="click">
                <div class="avatar-wrapper">
                    <img src="../assets/user.jpg" class="user-avatar" />
                    <i class="el-icon-caret-bottom" />
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="lookdata">查看资料</el-dropdown-item>
                    <el-dropdown-item divided @click.native="logout">
                        <span style="display: block; text-align: center; font-size: 14px">退出</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-menu>

        <el-dialog :destroy-on-close="true" title="查看资料" :visible.sync="dialogVisibleUp" width="25%">
            <div class="user">
                <img src="../assets/user.jpg" class="user-avatar" />
            </div>
            <el-form label-position="right" label-width="120px">
                <el-form-item label="用户名:">
                    {{ userData.uname }}
                </el-form-item>
                <el-form-item label="身份证:">
                    {{ userData.identity }}
                </el-form-item>
                <el-form-item label="联系电话:">
                    {{ userData.tel }}
                </el-form-item>
            </el-form>
        </el-dialog>
        <transition name="el-fade-in-linear" mode="out-in" :appear="true">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
export default {
    name: 'FrontEndAdminLayout',

    data() {
        return {
            dialogVisibleUp: false,
            userData: {},
        };
    },

    mounted() {
        this.userData = JSON.parse(sessionStorage.getItem("userinfo"))
    },

    methods: {
        handleSelect() {
        },
        logout() {
            sessionStorage.setItem("loginkey", 0);
            this.$router.push(`/login`);
        },
        lookdata() {
            this.dialogVisibleUp = true;
        },
    },
};
</script>

<style lang="less" scoped>
.el-menu-demo {
    font-weight: 700;
    box-shadow: 10px 10px 30px #c4c4c4;
    border-radius: 10px;
    margin: 15px 15px 20px 15px;
    padding: 0 25px 0 10px;
}



.avatar-container {
    //   float: right;
    position: absolute;
    right: 3.5%;
    top: 1.5%;

    .avatar-wrapper {
        margin-top: 5px;

        .user-avatar {
            cursor: pointer;
            width: 50px;
            height: 50px;
            border-radius: 15px;
            box-shadow: 1px 1px 8px 0px;
        }

        .el-icon-caret-bottom {
            cursor: pointer;
            position: absolute;
            top: 25px;
            font-size: 14px;
        }
    }
}

.el-dialog {
    border-radius: 8px;
    font-weight: 700;
    margin-top: 10vh !important;

    .el-dialog__body {
        .el-form-item {
            margin-bottom: 10px !important;

            .el-form-item__label {
                font-size: 16px;
            }

            .el-form-item__content {
                font-size: 16px;
                text-align: center;
                font-size: 16px;
            }
        }
    }
}

.user {
    width: 100px;
    height: 100px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10px;

    .user-avatar {
        width: 100px;
        height: 100px;
        border-radius: 15px;
        box-shadow: 1px 1px 8px 0px;
    }
}

.el-dropdown-menu__item {
    line-height: 25px;
}

.el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: #fff;
    color: #000;
}
</style>